import React from 'react';
import { FieldProps } from '@rjsf/utils';
import { Flex, Tabs } from 'antd';
import { Icon } from '@amcax/base';
import './style.scss';
import { isArray } from 'lodash';

// 标签页
export const TabsField = ({
  formData,
  onChange,
  uiSchema,
  disabled,
}: FieldProps<string>) => {
  const tabsList = uiSchema['ui:options'].options ?? [];

  // 构造 items 数组
  const items = isArray(tabsList)
    ? tabsList.map((item) => ({
        key: item.const,
        disabled: disabled ? disabled : item.disabled,
        label: (
          <div className='tab-content'>
            {item.icon && (
              <Icon
                tabIndex={0}
                style={{ fontSize: '24px', margin: 'auto' }}
                name={item.icon}
              />
            )}
            <Flex
              vertical
              style={{
                fontSize: '12px',
                lineHeight: '13px',
                height: '26px',
              }}
              className='items-center justify-center fs'>
              {item.title}
            </Flex>
          </div>
        ),
        children: null, // 你没有内容放在 tab 内部，所以设为 null；如有可补充
      }))
    : [];

  return (
    <Tabs
      defaultActiveKey={formData}
      className='custom-tab-bar'
      tabPosition='top'
      tabBarGutter={3}
      onChange={onChange}
      renderTabBar={(props, DefaultTabBar) => (
        <DefaultTabBar
          {...props}
          className='custom-tab-bar'
        />
      )}
      items={items}
    />
  );
};
